import './index.scss';
import React, { Component } from 'react'
import PageLayout from 'layouts/Page';
import ImageViewer from 'components/ImageViewer';
import certification from 'images/certification.jpg';
import certification2 from 'images/certification2.jpg';
import certification1 from 'images/certification1.jpg';
import certification4 from 'images/certification4.jpg';

// @PageLayout({classNames: 'page-certification', title: '平台资质' })
class Page extends Component {
  state = {}

  componentDidMount() {
    //  默认关闭页面
    // this.props.setHeader({
    //   onBack: () => {
    //     location.href = 'jzapp://close_web_page';
    //   }
    // });
  }

  handleImageViewerClose = () => {
    this.setState({
      img: null
    });
  }

  setImage = (img) => {
    this.setState({
      img
    });
  }

  render() {
    return <React.Fragment>
			<div className='tt-wrap'>
      <p className="summary">彩虹育儿，专注于母婴及女性健康管理，是国内首家优质的儿保医生上门服务机构。同时，我们拥有丰富的国内外疫苗合作资源，为您提供安全、周到、有保障的疫苗预约服务。</p>
				<h2>1. 营业执照</h2>
				<img onClick={this.setImage.bind(this, certification)} src={certification} alt=""/>
				<h2>2. 互联网药品信息服务资格证书</h2>
				<img onClick={this.setImage.bind(this, certification2)} src={certification2} alt=""/>
				<h2>3. 普陀分公司营业执照</h2>
				<img onClick={this.setImage.bind(this, certification1)} src={certification1} alt=""/>
				<h2>4. 上海芥箴食品流通许可证</h2>
				<img onClick={this.setImage.bind(this, certification4)} src={certification4} alt=""/>

      {
        this.state.img && <ImageViewer 
          isOpen 
          images={[this.state.img]}
          initialViewIndex={0}
          handleClose={this.handleImageViewerClose}
        />
      }
			</div>
    </React.Fragment>
  }
}

export default Page;